<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Javascript任务四</title>
	<link type=text/css href="style.css" rel=stylesheet>
  </head>
  <body>
    <form>
	  <input type="number" id="txt">
	  <input type="button" id="add-left" value="左侧入">
	  <input type="button" id="add-right" value="右侧入">&nbsp;&nbsp;&nbsp;&nbsp;
	  <input type="button" id="del-left" value="左侧出">
	  <input type="button" id="del-right" value="右侧出">
	</form>
    <div class="container clearfix" id="container">
	</div>
	<script>
	/**
	 * 为各个按钮添加click功能 
	 */
	  window.onload = function(){
	    document.getElementById( "add-left" ).onclick = addLeft;
		document.getElementById( "add-right" ).onclick = addRight;
		document.getElementById( "del-left" ).onclick = delLeft;
		document.getElementById( "del-right" ).onclick = delRight;
	  }
	  
	/**
	 * 左侧添加数字
	 */
	function addLeft(){
	  var text = document.getElementById( "txt" ).value;
	  var node_text = document.createTextNode( text );
	  var node_div = document.createElement( "div" );
	  var node_container = document.getElementById( "container" );
	  node_div.appendChild( node_text );
	  node_div.className = "number";
	  if ( !node_container.childNodes ){
	    node_container.appendChild( node_div );
	  }else{
	    var fir_node = node_container.firstChild;
		node_container.insertBefore( node_div,fir_node ); 
	  }
	}
	
	/**
	 * 右侧添加数字
	 */
	function addRight(){
	  var text = document.getElementById( "txt" ).value;
	  var node_text = document.createTextNode( text );
	  var node_div = document.createElement( "div" );
	  var node_container = document.getElementById( "container" );
	  node_div.appendChild( node_text );
	  node_div.className = "number";
	  if( !node_container.childNodes){
	    node_container.appendChild( node_div );
	  }else{
	    node_container.appendChild( node_div );
	  }
	}
	/**
	 * 删除左侧数字
	 */
	function delLeft(){
	  var node_container = document.getElementById( "container" );
	  if( node_container.firstChild ){
	    var node_fir = node_container.firstChild;
	    node_container.removeChild( node_fir );
	  }
	}
	
	/**
	 * 删除右侧数字
	 */
	function delRight(){
	  var node_container = document.getElementById( "container" );
	  if( node_container.lastChild ){
	    var node_last = node_container.lastChild;
	    node_container.removeChild( node_last );
	  }
	}
	</script>
  </body>
</html>